<template>
    <div class="container">
        <mt-header title="备孕">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="menstruation">
            <div class="menstruation_start">
                <label for="">
                    上次月经开始时间:
                    <input type="text" placeholder="2018-04-03" v-model="pickerVisible">
                    <img src="../../images/icon_01.png" alt="">
                    <mt-datetime-picker v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月"
                        date-format="{value} 日">
                    </mt-datetime-picker>
                    <mt-datetime-picker v-model="pickerVisible" type="time" @confirm="handleConfirm">
                    </mt-datetime-picker>
                </label>
            </div>
            <div class="menstruation_period">
                <label for="">
                    平均月经周期:
                    <input type="text" placeholder="28">天
                </label>
            </div>

            <div class="menstruation_day">
                <label for="">
                    月经天数:
                    <input type="text" placeholder="6">天
                </label>
            </div>

            <div class="next">
                <button>下一步</button>
            </div>

        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                pickerVisible: '2018-08-21',
                pickerVisible: ''
            };
        },
        methods: {
            handleConfirm() {

            }
        }
    };
</script>
<style scoped>
    .mint-header {
        background: #7fffaa;
        font-size: 20px;
        height: 50px;
        border-bottom: 1px solid #fff;
    }

    .menstruation {}

    .menstruation label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 10px;
        font-size: 14px;
    }

    .menstruation label input {
        width: 45%;
        height: 30px;
        margin-bottom: 0;
        text-align: center;
    }

    .menstruation_start label img {
        width: 25px;
        height: 25px;
    }

    .menstruation_start,
    .menstruation_period,
    .menstruation_day {
        background-color: #fff;
        height: 60px;
        line-height: 60px;
    }

    .menstruation_period input {
        margin-top: 5px;
    }

    .menstruation_day input {
        margin-left: 30px;
    }

    .next {
        margin-top: 100px;
        padding: 0 20px;
    }

    .next button {
        width: 100%;
        height: 50px;
        color: pink;
    }
</style>